<template>
    <div id="visitor">
        <div id="signIn" class="vistor">
             <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="NO PHOTOGRAPHY ALLOWED IN THE FACTORY" :visible.sync="dialogVistor" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
                <P>Please Follow Company Policy When Entering The Company</P>
                <div class="pic">
                    <img src="../assets/images/noPhoto.jpg" alt="">
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="success" round @click="toVistorFactory">Agree</el-button>
                </div>
            </el-dialog>
            <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="UPLOAD DOCUMENTS" :visible.sync="dialogDocument" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
                <P class="upload_warn" style="fontSize:24px">Please Upload Your Documents.</P>
                <div class="pic">
                    <img @click="uploadDoc" class="upload" src="../assets/images/document.png" alt="">
                </div>
                <div slot="footer" class="dialog-footer">
                    <div class="btns">
                        <el-button class="infoBtn"  size="mini" @click="showForm=true;dialogDocument=false" round type="info"> Go Back</el-button>
                        <el-button size="mini" type="success" @click="dialogDocument=false" round> Submission </el-button>
                    </div>
                </div>
                <input id="uplodaInp" type="file" style="display:none" />
            </el-dialog>
        </div>
        <div class="visitorContent">
            <div v-show="showForm">
            <div class="top_con">
                <p class="title">
                    PRE-REGISTRATION
                </p>
                <span class="title2">COUNTRY OF INTENDED VISIT</span>
            </div>
            <div class="country">
                <el-row>
                    <el-col :span="6">
                        <img class="china" src="../assets/images/Vie.png" alt="">
                        <p>Vietnam</p>
                    </el-col>
                    <el-col :span="6">
                        <img class="china" src="../assets/images/Can.png" alt="">
                        <p>Cambodia</p>
                    </el-col>
                    <el-col :span="6">
                        <img class="china" src="../assets/images/China.png" alt="">
                        <p>China</p>
                    </el-col>
                    <el-col :span="6">
                        <img class="china" src="../assets/images/Sing.png" alt="">
                        <p>Singapore</p>
                    </el-col>
                </el-row>
            </div>
            <div class="form_con">
                 <el-form :model="visitorForm">
                     <el-row :gutter="80">
                         <el-col :span="8" class="colItem">
                             <span>Factory/Department Of Visit</span>
                             <el-form-item>
                                <el-select style="width:100%" size="mini" placeholder="Select Factory" v-model="visitorForm.factory">
                                    <el-option value='111'>111</el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Host Name</span>
                             <el-form-item>
                                <el-select style="width:100%" size="mini" placeholder="Selection Of Respondents" v-model="visitorForm.hostName">
                                    <el-option value='111'>111</el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                            
                         </el-col>
                     </el-row>
                     <p class="detailsTitle">VISITORS DETAILS</p>
                     <el-row :gutter="80">
                         <el-col :span="8" class="colItem">
                             <span>Name</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.name">
                                   
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Gender</span>
                             <el-form-item>
                                <el-select style="width:100%" size="mini" placeholder="Select Your Gender" v-model="visitorForm.gender">
                                    <el-option value='111'>111</el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                            
                         </el-col>
                          <el-col :span="8" class="colItem">
                             <span>Visitor Category</span>
                             <el-form-item>
                                <el-select style="width:100%"  size="mini" placeholder="Please Select" v-model="visitorForm.category">
                                   <el-option value="111">111</el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Department</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.department">
                                   
                                </el-input>
                            </el-form-item>
                         </el-col>
                          <el-col :span="8" class="colItem">
                             <span>Contact Number</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.contactNumber">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Vehicle Detail</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Fill In" v-model="visitorForm.vehicleDetail">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Email</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.email">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Country</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.country">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Document Number</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Required Information" v-model="visitorForm.documentNumber">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Document Type</span>
                             <el-form-item>
                                <el-input  size="mini" placeholder="Plase Select The Type Of Certiflcate" v-model="visitorForm.documentType">
                                </el-input>
                            </el-form-item>
                         </el-col>
                         <el-col :span="8" class="colItem">
                             <span>Date And Time Of Visit</span>
                             <el-form-item>
                                <el-select  size="mini" style="width:100%" placeholder="Plase Select The Type Of Certiflcate" v-model="visitorForm.visitDate">
                                    <el-option value="111">
                                        111
                                    </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                         <el-col :span="24" class="colItem_text">
                             <span>Purpose Of Visit</span>
                             <el-input type="textarea" size="mini" placeholder="Required Information"></el-input>
                         </el-col>
                     </el-row>
                </el-form>
                <div class="btns">
                    <el-button size="mini" @click="showForm=false;dialogVistor=true" round> &lt; go back</el-button>
                    <el-button size="mini" @click="toDocument" type="success" round>  Next &gt;</el-button>
                </div>
            </div>
           </div>
        </div>
    </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      dialogVistor: true,
      visitorForm: {},
      dialogDocument: false,
      showForm: false
    };
  },
  methods: {
    toVistorFactory() {
      this.dialogVistor = false;
      this.showForm = true;
      this.dialogDocument = false;

    },
    toDocument() {
      this.dialogDocument = true;
      this.showForm = false;
    },
    uploadDoc(){
        $('#uplodaInp').click();
    }
  }
};
</script>
<style lang="less" scoped>
#visitor {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.vistor {
  p {
    color: #666;
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.pic {
  width: 100%;
  text-align: center;
  img {
    width: 60px;
  }
}
.upload {
    cursor: pointer;
}

.infoBtn {
  background-color: #909399 !important;
  margin-right: 50px;
}
.visitorContent {
  width: 80%;
  height: 100%;
  margin: auto;
  background-image: url("../assets/images/visit_bg.png");
  background-size: 100% 100px;
  background-repeat: no-repeat;

  .top_con {
    text-align: center;
    .title {
      color: rgb(88, 180, 72);
      font-size: 20px;
      font-weight: 600;
      //   margin-bottom: 10px;
    }
    .title2 {
      color: #fff;
      font-size: 16px;
    }
  }
  .country {
    width: 70%;
    margin: 5px auto;
    text-align: center;
    color: #fff;
    .china {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
  .form_con {
    color: #fff;
    font-size: 12px;
    .colItem {
      height: 50px;
    }
    .colItem_text {
      height: 60px;
    }
    .detailsTitle {
      width: 100%;
      margin: 0 0 20px;
      text-align: center;
      font-size: 16px;
    }
  }
  .btns {
    width: 70%;
    margin: 20px auto;
    text-align: center;

    button {
      width: 80px;
      margin-right: 50px;
    }
  }
}
</style>
<style lang='less'>
#visitor .el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #fff !important;
}
#visitor .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #fff !important;
  /* border-left-color:green; */
}
#visitor .el-popper .popper__arrow,
#visitor .el-popper .popper__arrow::after {
  border-bottom-color: #fff !important;
}
</style>

